<template>
  <view class="items">
    <view class="food-head">
      <image :src="details.apCookbook.picture" @click="previewImg(details.apCookbook.picture)" mode="aspectFill">
      </image>
      <view class="food-name">
        <view class="name-txt">
          {{ details.apCookbook.name }}
        </view>
      </view>
    </view>

    <!-- 菜谱简介 -->
    <view class="food-inducer">
      <view class="inducer-center">
        <text class="online">——</text>
        <text class="txt" style="color: #000000;">菜谱简介</text>
        <text class="online">——</text>
        <text class="symbol">▼</text>
      </view>
      <view class="content">{{ details.apCookbook.description }}</view>
    </view>


    <view style="width: 100%; margin-left: 100rpx;margin-right: 100rpx">
      <!-- 用料 -->
      <view class="inducer-center">
        <text class="online">——</text>
        <text class="txt">用料信息</text>
        <text class="online">——</text>
        <text class="symbol">▼</text>
      </view>
      <view>
        <view v-for="item in details.cookbookIngredientList" :key="item"
              style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;height: 80upx;">
          <view> {{ item.name }}</view>
          <view> {{ item.amount }}</view>
        </view>
      </view>

    </view>

    <view class="food-step">

      <!-- 做法步骤 -->
      <view class="inducer-center">
        <text class="online">——</text>
        <text class="txt">做法步骤</text>
        <text class="online">——</text>
        <text class="symbol">▼</text>
      </view>
      <view class="step_box" v-for="item in details.cookbookInstructionList" :key="item.id">
        <image :src="item.url" mode="aspectFill" style="border-radius: 20rpx"/>
        <view class="steps">
          <text class="step_desc">{{ item.step + 1 }}</text>
          <text></text>
          <view>{{ item.description }}</view>
        </view>
      </view>


      <!-- 底部导航 -->
      <view class="goods_nav">
        <view class="tab">
          <view class="tab_item" @click="handleflag">
            <uni-icons type="heart" size="20" v-if="!flag"></uni-icons>
            <uni-icons type="heart-filled" size="20" color='red' v-if="flag"></uni-icons>
            <view>收藏</view>
          </view>

        </view>

        <view class="tab">
          <view class="tab_item" @click="buttonClick">
            <image style="width: 36upx;height: 36upx" src="../../static/images/Basket-2.svg"></image>
            <view>菜篮子</view>
          </view>

        </view>

      </view>
    </view>
  </view>
</template>

<script>
import {
  mapState,
} from 'vuex'

import uniIcons from "@/components/uni/uni-icons/uni-icons.vue";

import {
  cookbook_detail
} from '@/api/ap_cookbook.js'

import {
  user_collect
} from '@/api/user_collect.js'

import {
  user_join
} from '@/api/user_cart.js'

export default {
  components: {
    uniIcons
  },
  data() {
    return {
      foodId: "",
      details: {},
      flag: false,
      title: "",
    }
  },
  onLoad(options) {
    this.foodId = options.foodId;
    console.log(this.foodId)
    this.getDetails();
  },


  computed: {
    ...mapState({
      menus: "menus"
    })
  },

  methods: {


    getDetails() {
      let params = {}
      params.id = this.foodId
      cookbook_detail(params).then(res => {
        console.log(res)
        if (res.code === '200') {
          this.details = res.data
          this.flag = res.data.collect
        } else {
          uni.navigateTo({
            url: '../login/login'
          })
        }

      })
    },
    //收藏保存数据
    handleflag() {
      let params = {}
      if (!this.flag) {
        params.type = 1;
      } else {
        params.type = 2
      }
      params.foodId = this.foodId
      user_collect(params).then(res => {
        if (res.code === '200') {
          if (!this.flag) {
            uni.showToast({
              title: '收藏成功'
            })
            this.flag = true
          } else {
            uni.showToast({
              title: '取消收藏'
            })
            this.flag = false
          }
        }
      })
    },

    previewImg(imageUrl) {
      console.log(imageUrl)
      var images = [];
      images.push(imageUrl);
      console.log(images)
      uni.previewImage({
        current: 0,
        urls: images
      });
    },


    buttonClick(e) {
      let params = {}
      params.type = 1;
      params.foodId = this.foodId
      user_join(params).then(res => {
        if (res.code === '200') {
          uni.showToast({
            title: '加入成功',
            icon: 'none'
          })
        }
      })

    },

  }
}
</script>

<style lang="scss">

.step_desc {
  color: orange;
  font-size: 40px;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  line-height: 50rpx
}

.items {
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap;
  font-family: "楷体", serif;

  .food-head {
    position: relative;

    image {
      width: 750rpx;
      height: 550rpx;
      background-size: cover;
    }

    .food-name {
      position: absolute;
      bottom: -80rpx;
      left: 50%;
      margin-left: -37rpx;
      padding: 10rpx;
      width: 60rpx;
      background-color: rgba($color: #fff, $alpha: 0.81);
      opacity: 0.7;
      border-radius: 30rpx;
      text-align: center;

      .name-txt {
        padding: 13rpx 12rpx;
        border: 1rpx solid #000;
        font-size: 33rpx;
        border-radius: 20rpx;
        color: #000;
        line-height: 43rpx;
      }
    }
  }

  .food-inducer {
    width: 710rpx;
    margin-top: 100rpx;
    margin-bottom: 40rpx;
    margin-left: 20rpx;
    color: #979797;

    .content {
      margin-left: 38rpx;
      text-indent: 2em;
    }
  }


  .goods_nav {
    position: fixed;
    display: flex;
    padding: 0 30rpx;
    justify-content: space-evenly;
    align-items: center;
    bottom: 0;
    width: 100%;
    background-color: #fff;

    .tab {
      display: flex;
      padding: 0 5px;
      font-size: 12px;

      .tab_item {

        margin: 15rpx 10px 0;


      }
    }

  }

  .inducer-center {
    text-align: center;
    color: orange;

    .txt {
      font-size: 35rpx;
      font-weight: 520;
      padding: 0 20rpx;
    }

    .symbol {
      display: block;
    }

  }


  .food-step {
    display: flex;
    box-sizing: border-box;
    margin-bottom: 100rpx;
    flex-wrap: wrap;

    .inducer-center {
      margin-left: 212rpx;
    }

    image {
      width: 700rpx;
      height: 600rpx;
      margin-left: 20rpx;
      background-size: cover;
    }


    .steps {
      display: flex;
      box-sizing: border-box;
      margin: 10rpx 0 10rpx 50rpx;

    }


  }


}


</style>